<template>
  <div class="bottom-right-chart">
    <ChartComp id="bottomRight"
      :message="pieRight" />
  </div>
</template>

<script >
import * as echarts from 'echarts'
export default {
  data() {
    return {
      pieRight: {
        legend: {
          show: false,
          top: '5%',
          left: 'center',
          icon: 'rect', // 形状
          itemWidth: 12, // 宽
          itemHeight: 12, // 高
          textStyle: {
            //图例文字的样式
            color: '#ccc',
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'item'
        },
        graphic: [
          {
            type: 'text',
            left: '40%',
            top: '43%',
            style: {
              text: '780',
              textAlign: 'center',
              fill: '#fff',
              fontSize: 36
            }
          },
          {
            type: 'text',
            left: '46%',
            top: '65%',
            style: {
              text: '万元',
              textAlign: 'center',
              fill: '#CCE0F7',
              fontSize: 20
            }
          }
        ],
        series: [
          {
            name: '投资规模/原值',
            type: 'pie',
            radius: ['55%', '75%'],
            center: ['50%', '55%'],
            data: [
              {
                value: 21,
                name: '科研设施',
                itemStyle: {
                  // normal: {
                  //颜色渐变
                  color: new echarts.graphic.LinearGradient(
                    1,
                    1,
                    1,
                    0, //(上-下 渐变)
                    [
                      { offset: 0, color: '#FD9494' },
                      { offset: 1, color: '#ED5656' }
                    ]
                  )
                  // },
                }
              },
              {
                value: 55,
                name: '仪器设备',
                itemStyle: {
                  // normal: {
                  //颜色渐变
                  color: new echarts.graphic.LinearGradient(
                    1,
                    1,
                    1,
                    0, //(上-下 渐变)
                    [
                      { offset: 0, color: '#FFF5B6' },
                      { offset: 1, color: '#DFC338' }
                    ]
                  )
                  // },
                }
              },
              {
                value: 34,
                name: '软件系统',
                itemStyle: {
                  // normal: {
                  //颜色渐变
                  color: new echarts.graphic.LinearGradient(
                    1,
                    1,
                    1,
                    0, //(上-下 渐变)
                    [
                      { offset: 0, color: '#9AFEA5' },
                      { offset: 1, color: '#5AD8A6' }
                    ]
                  )
                  // },
                }
              }
            ],
            itemStyle: {
              borderRadius: 2,
              borderColor: '#001D40',
              borderWidth: 2
            },
            label: {
              formatter: '{b}\n\n{c}%',
              color: '#B5C5D4'
            }
          }
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.bottom-right-chart {
  width: 100%;
  height: 100%;
}
</style>
